<template>
	<Taber>

	</Taber>
	<div class="qqq">
		<div class="left-column">
			<div class="user-info">
				<img style="width: 88px;height: 88px;" :src="store.userInfo.avatar"
					alt="用户头像" class="avatar">
				<div class="user-name">{{store.userInfo.username}}</div>
				<div class="user-email">{{ store.userInfo.email?store.userInfo.email:'' }}</div>
			</div>
			<div>
				<div class="nav-item"  :style="currentIndex==index?{'color':'#ff7f3e'}:''" v-for="item,index in items" :index='index' @click="handleItemClick(index)">
					<van-icon :name="item.icon" color='#f23333' size="25" />
					<span>{{item.name}}</span>
					<van-icon name="arrow" />
				</div>
			</div>

			<button class="logout-btn" @click="LogOut()">退出登录</button>
		</div>
		<div class="right-column" v-if="currentIndex=='0'"><!-- 订单页面 -->
			<div class="notification">
				<p>尊敬的用户，感谢您购买本平台营销账户资源。请注意：所有订单只保留7天，超过7天的订单将自动删除且无法恢复，请及时保存相关信息。</p>
				<img style="width: 669px;height: 32px;"
					:src="'https://pic.haotaotao.store/image/e0d01c9e2f81a6708e0588fd3689d91f.png'" alt="">
			</div>
			<div class="order-status" v-if="0"><!-- 我的订单没参数div -->
				<van-icon name="smile-comment-o" size='50' />
				<p>您还未购买任何商品</p>
				<van-pagination style="width: 48%;padding-top: 24px;" v-model="currentPage"
					:total-items="1" :items-per-page="1" mode="simple" />
			</div>
			<div class="order-status" v-if="1"><!-- 我的订单有参数div -->
				<div class="tab-content">
					<table style="width: 100%;">
						<thead class="tab-content-val">
							<tr>
								<th>订单号</th>
								<th>订单ID</th>
								<th>产品名称</th>
								<th>总价</th>
								<th>支付方式</th>
								<th>支付状态</th>
								<th>取卡状态</th>
								<th>交易时间</th>
							</tr>
						</thead>
						<tbody>
							<tr class="tab-content-tr" v-for="order in purchaseOrders" :key="order.id">
								<td style="color: #0052d9;">{{ order.trade_no }}</td>
								<td>{{ order.id }}</td>
								<td>{{ order.goods_name }}</td>
								<td>{{ order.goods_price }}</td>
								<td>{{ order.paytype }}</td>
								<td>{{ order.paymentStatus }}</td>
								<td>{{ order.take_status_text }}</td>
								<td>{{ order.create_at }}</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="pagination-box">
					<span style="font-size: 14px;color: #8c8989; padding-left: 42px;">共{{ orderLengh }}条数据</span>
					<van-pagination style="width: 48%;padding-top: 24px;" v-model="currentPage"
					:total-items="orderLengh" :items-per-page="pageSize" mode="simple" @change="switcPagination" />
				</div>
				
			</div>
		</div>
		<div class="moeny-column"v-if="currentIndex=='1'"><!-- 钱包页面 -->
			<div style="background-color: white;padding:0 24px 24px 24px;">
				<ul>
					<li style="border-bottom: 1px solid #cfc6c6;">
						<div class="li-item">
							<h3>当前金币</h3>
							<h2>0.00</h2>
							<h5>COINS</h5>
						</div>
						<div class="li-item">
							<h3>积分</h3>
							<h2>0.00</h2>
							<h5>POINTS</h5>
						</div>
						<div class="li-item">
							<h3>已消费</h3>
							<h2>0.00</h2>
							<h5>COINS</h5>
						</div>
					</li>
					<li>
						<p style="font-size: 13px;line-height: 24px;width: 669px;">
							尊敬的用户，充值前请阅读《金币说明》。支付宝与	
							微信支付单笔限额为1到999元，数字货币单笔限额为10
							到9999元等值范围内。微信支付可能存在3到5分钟的延
							迟，数字货币到账时间取决于区块链网络确认速度。还
							可在第三方网站购买多面值的卡密来充值金币。如充值
							后10分钟内未到账，请联系平台客服提供充值记录及相
							关证明，我们将尽快为您核实处理。
						</p>
					</li>
					<li>
						<div class="ant-space-item"><van-icon name="paid" /><span style="padding-left: 6px;">卡密兑换</span>
						</div>
						<div @click="showCenter" class="ant-space-item" style="background-color: #ff7f3e29;color: #FF7F3E;"><van-icon
								name="after-sale" /><span style="padding-left: 6px;">金币充值</span></div>
					</li>
				</ul>
			</div>
			<van-popup v-model:show="show" round style="width: 350px;height: 508px;">
				<div style="padding: 0 12px;">
					<h3>金币充值</h3>
					<div class="n-alert__border">
						金币:人民币 = 1:1，微信支付可能延迟到账。本弹窗输入的金额单位为元，选择数字货币支付后，
						跳转支付页面将显示按实时汇率计算的数字货币数量，转账时必须按照该数量进行，否则无法自动
						到账。金币不可提现或转让，请按需充值。
					</div>
					<div class="Recharge-box">
						<div class="Recharge" v-for="val,index in paymentStatus" :index='index'
							@click="paymentClick(index)"
							:style="paymentIndex == index?{'backgroundColor': '#ff7f3e29','borderColor':'#ff7f3e'}:''">
							<van-icon :name="val.icon" style="padding-right: 6px;" size='20' :color='val.color' />
							{{val.name}}
						</div>
					</div>
					<div class="" style="padding-top: 24px;height: 100px;line-height: 50px;">
						<span>充值金额:</span>
						<van-field v-model="digit" style="border: 1px solid #868cd0;border-radius: 8px;" type="digit"
							label="￥" placeholder="请输入需要充值的金额" />
					</div>
					<div class="Recharge-but">
						立即充值
					</div>
				</div>
			</van-popup>
			<div class="order-status" style="margin-top: 24px;" v-if="0"><!-- 我的订单没参数div -->
				<van-icon name="smile-comment-o" size='50' />
				<p>您还未购买任何商品</p>
			</div>
			<div class="order-status" style="margin-top: 24px;" v-if="1"><!-- 我的订单有参数div -->
				<div class="tab-content">
					<table style="width: 100%;">
						<thead class="tab-content-val">
							<tr>
								<th>订单ID</th>
								<th>产品名称</th>
								<th>数量</th>
								<th>单价</th>
								<th>总价</th>
								<th>支付方式</th>
								<th>支付状态</th>
							</tr>
						</thead>
						<!-- <tbody>
							<tr class="tab-content-tr" v-for="order in purchaseOrders" :key="order.orderId">
								<td>{{ order.orderId }}</td>
								<td>{{ order.productName }}</td>
								<td>{{ order.quantity }}</td>
								<td>{{ order.unitPrice }}</td>
								<td>{{ order.totalPrice }}</td>
								<td>{{ order.paymentMethod }}</td>
								<td>{{ order.paymentStatus }}</td>
							</tr>
						</tbody> -->
					</table>
				</div>
			</div>
		</div>
		<div class="moeny-column" v-if="currentIndex=='2'">
			<div class="vip">
				<div class="user-info-box">
					<img style="width: 88px;height: 88px;" :src="store.userInfo.avatar"
						alt="用户头像" class="avatar">
					<div class="vip-box"><!-- 会员状态 -->
						<span style="font-weight: 600;font-size: 17px;">您还未开通会员</span>
						<span style="color: #999;font-size: 14px;">剩余时间：请先开通会员</span>
					</div>
				</div>
				<div class="vip-val">
					开通会员将享受专属优惠价格、专属优惠代码、更多工具支持。会员资格自开通之日起生效，仅限本人使用且不可转让，平台保留根据运营需要调整会员权益的权利。
					白银会员[30天有效期]、黄金会员[90天有效期]、钻石会员[180天有效期]、荣耀会员[永久有效]。除荣耀会员之外的所有会员都可叠加购买。
				</div>
			</div>
			<div class="vip" style="margin-top: 12px;">
				<div class="Recharge-box" style="height: 102px;">
					<div class="Recharge" style="height: 102px;" v-for="val,index in vipStatus" :index='index'
						@click="vipClick(index)"
						:style="vipIndex == index?{'backgroundColor': '#ff7f3e29','borderColor':'#ff7f3e'}:''">
						<div class="vip-grade">{{val.name}}</div>
						<div class="vip-grade" style="font-size: 24px;">{{val.price}}<span style="color: rgb(141 135 135);padding-left: 6px;font-size: 16px;">金币</span> </div>
						<div class="vip-grade" style="color: #6666;text-decoration: line-through;">￥{{val.originalPrice}}</div>
					</div>
				</div>
				<div class="" style="padding-top: 24px;">
					支付方式 <span class="All*">*</span>
				</div>
				<div class="Recharge-box" style="justify-content: flex-start">
					<div class="Recharge" style="background-color:#ff7f3e29 ;color: #ff7f3e;">
						<van-icon name="gold-coin" style="padding-right: 6px;" size='20' />
						金币支付
					</div>
				</div>
				<div class="Recharge-but"  style="width: 200px;">
					立即充值
				</div>
			</div>
		</div>
	</div>

	<LastPageBar>

	</LastPageBar>
</template>

<script setup>
	import { onMounted,computed} from 'vue';
	import Taber from '../components/Taber.vue';
	import LastPageBar from '../components/LastPageBar.vue';
	import {ref} from 'vue';
	import { userStore } from "../store/user.js";	
	import { useRouter } from 'vue-router';
	import {orderApi } from '../API/orderApi.js';
	import dayjs from 'dayjs';
import { closeDialog } from 'vant';

	const router = useRouter(); // ✅ 创建 router 实例
	const store = userStore();
	const currentPage = ref(1);
	const pageSize = ref(5);
	const orderLengh = ref(0);
	
	const items = ref([{
			id: 1,
			name: '我的订单',
			icon: 'shopping-cart'
		},
		{
			id: 2,
			name: '我的钱包',
			icon: 'gold-coin'
		},
		{
			id: 3,
			name: '我的会员',
			icon: 'vip-card'
		},
		{
			id: 3,
			name: '个人资料',
			icon: 'gift-card'
		},
	]);
	const paymentStatus = ref([{
			id: 1,
			name: '微信',
			icon: 'wechat',
			color: '#3ce252'
		},
		{
			id: 2,
			name: '支付宝',
			icon: 'alipay',
			color: 'blue'
		}
	]);
	const vipStatus = ref([{
			name: '白银会员',
			color: '#3ce252',
			price:36,
			originalPrice:60
		},{
			name: '黄金会员',
			color: '#3ce252',
			price:88,
			originalPrice:180
		},{
			name: '钻石会员',
			color: '#3ce252',
			price:166,
			originalPrice:366
		},{
			name: '荣耀会员',
			color: '#3ce252',
			price:699,
			originalPrice:999
		}
	]);
	// 模拟后端返回的购买订单数组
	const purchaseOrders = ref([]);
	let currentIndex = ref(0) //order-status显示的index
	const handleItemClick = (index) => {
		currentIndex.value = index
		
        
	};
	//弹窗显示
	const show = ref(false);
	const showCenter = () => {
		show.value = true;
	};
	let paymentIndex = ref(0)
	const paymentClick = (index) => {
		paymentIndex.value = index
		console.log(index, paymentIndex);
	}
	let vipIndex = ref(0)
	const vipClick = (index) => {
		vipIndex.value = index
	}
	const LogOut =()=>{
		store.$reset();
		router.push('/login'); 
	}
	const orderList = () =>{
		orderApi.list(
			{limit: pageSize.value,
			page:currentPage.value}).then(res=>{
				purchaseOrders.value = res.data.list;
				orderLengh.value = res.data.total;
				for(let i = 0; i < purchaseOrders.value.length; i++){
					purchaseOrders.value[i].create_at = dayjs(purchaseOrders.value[i].create_at *1000).format('YYYY-MM-DD HH:mm:ss')
				}
				console.log(purchaseOrders.value);
		})
	}
	const switcPagination = ()=>{
		orderList();
	}
	onMounted(() => {
		orderList();
		// 在这里执行你需要的逻辑，例如获取数据
});
</script>

<style scoped>
.All{
  color: #d03050;
}
	.qqq {
		display: flex;
		width: 68%;
		margin: 0 auto;
		padding-top: 24px;
	}

	.left-column {
		width: 281px;
		background-color: #f4f4f4;
		padding: 20px;
		border-right: 1px solid #e0e0e0;
		height: 450px;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
		width: 281px;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-bottom: 10px;
	}

	.user-name {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.user-email {
		font-size: 14px;
		color: #777;
	}

	.nav-item {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		cursor: pointer;
		justify-content: space-between
	}

	.nav-icon {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.logout-btn {
		width: 100%;
		padding: 10px;
		background-color: #f8bbd0;
		border: none;
		border-radius: 5px;
		color: white;
		cursor: pointer;
		margin-top: 24px;
	}

	.right-column {
		flex: 1;
		margin-left: 24px;
	}

	.notification {
		margin-bottom: 20px;
		background-color: white;
		padding: 24px;
	}

	.notification p {
		margin-bottom: 5px;
	}

	.highlight {
		color: #f57c00;
		font-weight: bold;
	}

	.order-status {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: white;
		padding: 24px;
	}

	.order-icon {
		width: 80px;
		height: 80px;
		margin-bottom: 10px;
	}

	.buy-btn {
		padding: 10px 20px;
		background-color: #ffab91;
		border: none;
		border-radius: 5px;
		color: white;
		cursor: pointer;
	}

	.tab-content {
		width: 100%;
	}

	.tab-content-val {
		height: 50px;
		line-height: 50px;
	}

	.tab-content-tr {
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
	

.tab-content-tr:hover{
    background-color: #f9f9f9; /* 偶数行背景色 */
}
	.moeny-column {
		flex: 1;
		width: 669px;
		margin-left: 24px;
		padding: 0 24px;

	}

	.moeny-column li {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}

	.li-item {
		text-align: center;
		background-color: #f7f8fa;
		width: 30%;
		margin: 12px;
	}

	.li-item h5 {
		color: #666;
	}

	.ant-space-item {
		width: 122px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background-color: antiquewhite;
		border-radius: 6px;
		color: #F0A020;
	}

	.n-alert__border {
		padding: 13px;
		background-color: rgba(250, 224, 181, 0.5);
		font-size: 14px;
	}

	.Recharge {
		width: 150px;
		height: 50px;
		border: 1px solid green;
		line-height: 50px;
		text-align: center;
		border-radius: 6px;
	}

	.Recharge-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 50px;
		padding-top: 24px;
	}

	.Recharge-but {
		width: 100%;
		height: 50px;
		background-color: antiquewhite;
		margin-top: 24px;
		text-align: center;
		line-height: 50px;
		border-radius: 16px;
		color: #d49836;
	}
	.user-info-box{
		    display: flex;
		    width: 100%;
		    ;
		    border-bottom: 1px solid #9f9b9b;
	}
	.vip-box{
		display: grid
		;
		    width: 250px;
		    justify-content: center;
		    align-items: center;
	}
	.vip-val{
		padding-top: 24px;
		    font-size: 14px;
		    color: #494949;
	}
	.vip{
		width: 669px;
		padding: 24px;
		background-color: white;
	}
	.vip-grade{
		height: 33px;
		line-height: 33px;
		font-weight: 600;
	}
	.pagination-box{
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: baseline;
	}
</style>